<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="80%"
    custom-class="search-result-pop"
    :before-close="handleClose"
  >
    <div>
      <ProDetail v-if="dialogVisible" ref="proDetail" @addSuccess="addSuccess" @handleClose="dialogVisible = false" />
    </div>
  </el-dialog>
</template>
<script>
import { addPopFormConfig } from '../initData'
import ProDetail from './proDetail.vue'
export default {
  name: 'AddDetailPop',
  components: {
    ProDetail
  },
  data() {
    return {
      dialogVisible: false,
      addPopFormConfig: JSON.parse(JSON.stringify(addPopFormConfig)),
      src: '',
      popType: '',
      detail: '',
      columnList: [],
      id: '',
      comTypeOptions: [
        {
          label: '类型1',
          value: '1'
        },
        {
          label: '类型2',
          value: '2'
        }
      ],
      comManageVal: '',
      time1: '',
      time2: '',
      time3: '',
      time4: '',
      rules1: '',
      comMetariall: '',
      filesVal: '',
      localFormParams: {
        entryType: '', // 参赛类型
        itemPeopleNum: null, // 参赛团队最大人数
        reviewRules: '', // 评审规则
        reviewRequire: '', // 评审工作要求
        annexDownType: '' // 比赛材料下载类型;1:已报名可下载,2:入选初赛可下载
      },
      scheduleParams: {
        closingDate1: '',
        timeRange1: '',
        closingDate2: '',
        timeRange2: '',
        closingDate3: '',
        timeRange3: '',
        closingDate4: '',
        timeRange4: ''
      }
    }
  },
  methods: {
    open({ popType, id, columnList, API = null }) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.proDetail && this.$refs.proDetail.open({ popType, id, columnList, API })
      })
    },
    handleClose() {
      this.addPopFormConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      this.dialogVisible = false
    },
    addSuccess() {
      this.handleClose()
      this.dialogVisible = false
      this.$emit('addSuccess')
    }
  }
}
</script>

  <style lang='scss'>
      .search-result-pop {
          .el-drawer__body {
              padding: 15px 20px;
          }
          .basic-infos {

              .title {
                  padding: 3px 10px;
                  border-left: 2px solid rgb(20, 165, 232);
                  margin-bottom: 20px;
              }
          }
          .dialog-footer {
              display: inline-block;
              width: 100%;
              text-align: right;
          }
      }
  </style>

<style lang="scss" scoped>

    .mb-10 {
        margin-bottom: 10px;
    }
    .mr-10 {
        margin-right: 10px;
    }
    .choose-time-row {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .audit-row {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
</style>

